import Icon from '@/components/Icon';
import { View } from '@tarojs/components';
import React from 'react';
import { ActivityType } from '../../constants';
import styles from './index.module.scss';

const OffActivity = ({ product }) => {
  const { activityType, discount, favouredStatus, activityLimit } = product ?? {};

  if (activityType !== ActivityType.off) {
    return null;
  }

  return (
    <View className={`customePageBorderStyle ${styles.OffActivity}`}>
      <View className="inner-wrap customePageStyle">
        <Icon name="icon_labe" className="icon" size={18} />

        <View className="discount">
          {discount}
          {favouredStatus !== '2' ? '折' : ''}
        </View>
        <View className="split-line customePageBackgroundStyle"></View>

        <View className="tip">限时折扣</View>

        {!!activityLimit && <View className="split-line customePageBackgroundStyle"></View>}

        <View className="activityLimit">{!activityLimit ? '' : '限' + activityLimit + '份'}</View>
      </View>
    </View>
  );
};

export default OffActivity;
